import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import moment from 'moment';
import Comment from './Comment';
import InputControl from './InputControl';
import styles from './styles.less';
import { createForm } from 'rc-form';
import { PullToRefresh} from 'antd-mobile';

class MessageConversation extends Component {
  constructor(props) {
    super(props);

    this.state = {
      msg: [],
      down: true,
      refreshing: false,
      text: '上拉可以刷新',
       height: document.documentElement.clientHeight,
    };
  }

  componentDidMount() {
    this.node = this.refs.conversation;
  }
  shouldComponentUpdate() {
    return true;
  }

  componentDidUpdate() {
    const { controlClientHeight } = this.props;
    this.node.style.paddingBottom = `${controlClientHeight}px`;
    window.scrollTo(0, 0);
  }

  componentWillUnmount() {

  }

  render() {
    const { comments, totalCount, dispatch, ...rest } = this.props;
    let data = new Date();
    let time = data.getTime();
    let msg = [];
    var hub = $.connection.myHub;
    hub.client.BroadcastMessage = (message) => {
         this.setState({
          msg : [message],
        });   
    };

    this.changeRefresh = () =>{
       this.setState({ refreshing: true });
        setTimeout(() => {
          this.setState({ refreshing: false });
        }, 1000);
        if(comments&&comments.length == totalCount){
            this.setState({
              text: '加载完毕'
            })
        }else{
          dispatch({
            type: 'message/fetchMessage',
            payload:{
                patientId: JSON.parse(localStorage.getItem("auth"+sessionStorage.getItem("hid"))).patientId,
                doctorId:rest.location.state.doctorId,
                page: 0,
                size: comments.length + 10
            }
          })
        }
       
    }
    return (
      <div
        ref="conversation"
        className={styles.messageConversation}>
        <div className={styles.comments}>
            <PullToRefresh
              damping={100}
              ref={el => this.ptr = el}
              indicator={this.state.down ? {} : { deactivate: text }}
              direction={this.state.down ? 'down' : 'up'}
              refreshing={this.state.refreshing}
              onRefresh={this.changeRefresh}
               style={{
                 height: this.state.height,
                  overflow: 'auto',
              }}
            >
               {comments.map(comment =>
              <div key={comment.Id}>
                <div className={styles.conversationPartsDateDivider}>
                  <time className={styles.conversationDate}>
                    
                    {comment.updateTime}
                  </time>
                </div>
                <Comment id="labText" comment={comment} {...rest} />
                {this.state.msg.length == 0 ?
                    "":
                    this.state.msg.map(item =>(
                      <div className={styles.commentContainer}>
                        <div className={`${styles.comment} ${styles.commentUser}`}>
                          {item}
                        </div>
                      </div>
                      ))
                  }
              </div>
            )}
            </PullToRefresh>
        </div>
        <InputControl {...this.props} />
      {/*通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件InputControl*/}
      </div>
    );
  }
}
export default createForm()(MessageConversation);


 